<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body,ul,ol{
		margin:0;
		padding:0;
		border: 0;
	}
	li{
		list-style: none;
	}
	#box{
		width:978px;
		height:340px;
		padding: 5px;
		margin:100px auto;
		position: relative;
	}
	#ad{
		width:880px;
		height:340px;
		overflow:hidden;
		position:relative;
	}
	#box ul{
		width:2239.86px;
		height: 170px;
		position:absolute;
		top:20px;
	}
	h4{
		font-size:40px;
		color:white;
		position:relative;
		top:230px;
		left:60px;
		overflow:hidden;
	}
	#box ul li{
		float: left;
		position:relative;
		text-align:center;
	}
	#btnArr{
		width:490px;
		height:40px;
		position: absolute;
		left: 5px;
		top: 50%;
		margin-top: -20px;
	}
	#btnArr span{
		width:40px;
		height:60px;
		position: absolute;
		font-size:20px;
		line-height:60px;
		font-family:  "宋体";
		color: #fff;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
	}
	#left{
      position:relative;
      left:-50px;
      top:10px;
	}
	#right{
		position:relative;
		left:940px;
		top:10px;
	}
	</style>
</head>
<body>
	<div id="box">
		<div id="ad">
			<ul>
			<li>
			<img src="lunbo8.png"width="220px"height="220px">
            <p>SUEDE BOW女子休闲鞋</p>
            <p>￥249.00</p>
			</li>
			<li>
			<img src="lunbo9.png"width="220px"height="220px">
             <p>BASKET BOW女子蝴蝶结装饰休闲鞋</p>
             <p>￥149.00</p>
			</li>
			<li>
			<img src="lunbo10.png"width="220px"height="220px">
             <p>PUMA X FENTY SURF女子休闲拖鞋</p>
             <p>￥449.00</p>
			</li>
			<li>
			<img src="lunbo11.png"width="220px"height="220px">
             <p>RS-O PLAY男女同款休闲鞋</p>
             <p>￥550.00</p>
			</li>
			<li>
			<img src="lunbo12.png"width="220px"height="220px">
             <p>MCS男子拼色外套</p>
             <p>￥449.00</p>
			</li>
			<li>
			<img src="lunbo13.png"width="220px"height="220px">
             <p>MCS 男子拼色抽绳长裤</p>
             <p>￥690.00</p>
			</li>
			</ul>
		</div>
		<div id="btnArr">
			<span id="left"><</span>
			<span id="right">></span>
		</div>
	</div>
	<script>
	var box=document.getElementById('box');
	var ad=box.children[0];
	var ul=box.getElementsByTagName('ul')[0];
	var btnArr=document.getElementById('btnArr');
	var left=document.getElementById('left');
	var right=document.getElementById('right');
	var imgWidth=ad.offsetWidth;
	box.onmouseover=function(){
		btnArr.style.display="block";
	}
	box.onmouseout=function(){
		btnArr.style.display="none";
	}
	right.onclick=function(){
		autoPlayStep();
	}
	left.onclick=function(){
		key--;
		if(key<0){
			key=0.46;
		}
		move(ul,-key*imgWidth);
		s--;
		if(s<0){
			s=0.46;
		}
		// 排他思想
	}
	var key=0;//控制图片
	var s=0; //控制小方块
	function autoPlayStep(){
		key++;
		if(key>0.46){
			key=0;
		}
		move(ul,-key*imgWidth);
		s++;
		if(s>0.46){
			s=0;
		}
	}
	function move(ele,target){
		// 两个必要，一个是speed 一个定时器
		// 同一个页面中每一个元素添加一个定时器的属性
		// 要用定时器先清定时器
		if(ele.timer){
			clearInterval(ele.timer);
		}
		ele.timer=setInterval(moveStep,20)
		function moveStep(){
			// 既能向右走，又能向左走，速度有正有负
			// var speed=target>ele.offsetLeft?2:-2;
			// 缓动的速度
			var speed=(target-ele.offsetLeft)/20;
			// 为了避免定时器停不下来的Bug(speed最终会出现小数，浏览器会四舍五入，变成0)
			// 需要二次处理步长
			// 大于0向上取整，小于0，向下取整
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			ele.style.left=ele.offsetLeft+speed+"px";
			// 判断临界值（什么时候停止运动）
			var cha=target-ele.offsetLeft;
			// 如果cha小于speed停止运动，同时把ele运动到目标位置
			if(Math.abs(cha)<Math.abs(speed)){
				clearInterval(ele.timer);
				ele.style.left=target+"px";
			}
		}
	}
	</script>
</body>
</html>